<template>
	<button class="custom-button" @click="clickHandel" :hover-class="'hover-button-class'">
		<slot></slot>
	</button>
</template>

<script>
	export default {
		methods: {
			clickHandel(){
				this.$emit('click')
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.custom-button{
		
		display: inline-block;
		margin: 0;
		padding: 0;
		width: auto;
		height: auto;
		border-radius: 8px;
		color: #000;
		background-color: #F1F3F6;
		box-shadow: 5px 5px 10px #d7dce5, -5px -5px 11px #ffffff;
		cursor: pointer;
		font-size: 14px;
		line-height: 50px;
		text-align: center;
		&:after{
			display: none;
		}
	}
	
	.hover-button-class{
		display: inline-block;
		margin: 0;
		padding: 0;
		width: auto;
		height: auto;
		line-height: 0;
		border-radius: 8px;
		color: #000;
		background-color: #F1F3F6;
		cursor: pointer;
		box-shadow: inset 2px 2px 1px #b1bccd, inset -2px -2px 1px #ffffff;
		font-size: 14px;
		line-height: 50px;
		text-align: center;
	}
</style>
